<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/js/css/bootstrap.min.css">
    
    <title>部门管理</title>
	
	
  </head>

<body>
<div class="container">
  <ul class="nav nav-tabs ">
  <li role="presentation" ><a href="../emploee/emploeelist">人员管理</a></li>
  <li role="presentation" class="active"><a href="#">部门管理</a></li>
  <li role="presentation"><a href="../adress/adresslist">地址管理</a></li>
  <li role="presentation"><a href="./manager">权限管理</a></li>
   </ul>
   <div class="text-right"
    <p >欢迎您,${user.username }</p>
    <a  href="../loginout" >注销</a>
    </div>
   </div>
   <br><br>
    <div class="container"  style="width: 30%;">
 
   <form class="form-inline" id="emploee_list">
    <div class="form-group ">
    <label for="exampleInputName2">部门名称</label>
     <input type="text" class="form-control" placeholder="输入部门" id="deptName"/>
  </div>
 
    <input type="button" class="btn btn-default" value="查询" onclick="search()"  />
    <input type="button" class="btn btn-default" value="新增" onclick="deptadd()"  />
</form>
 </div>
    
    
    
    
    <div class="container" style="width: 30%;">
    <table class="table table-bordered text-center">
    <tr id="show_result"></tr>
    </table id=""dept_list>
    </div>
    <div class="container" style="width: 30%;">
    <form id="edit_dept">
	 <table  class="table table-bordered  text-center" style="table-layout:fixed "  id="tb_edit">
		<tr>
			<th width=40% >部门名称</th>
			<th width=10% class="text-center">优先级</th>
			<th class="text-center" width=10%>编辑</th>
			
		</tr>
		<c:forEach items = "${deptlist }" var = "dept"  >
		<tr id= "${dept.id }">
		    <td class="text-left">${dept.deptName }</td>
		    <td >${dept.ord  }</td>
		    <td ><input type="button" class="btn btn-primary btn-sm" value="修改"  onclick="edit(this)"/></td>
		    
		</tr>
		
		</c:forEach>
	</table> 
	</form>
	</div>

	



</body>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/js/bootstrap.min.js"></script>
<script type="text/javascript"> 
 
	function search(){
		var deptName=$("#deptName").val();
		
		window.location.href="deptlist?deptName="+deptName;
		
	}



  function edit(btn){
    var tr =$(btn).parent("td").parent("tr");
	var td_list=$(btn).parent("td").siblings("td");
    var id =tr.attr("id")
    var btn_count =$("input[type='button'][value='保存']").size();
    if(btn_count >= 1){
    alert("请先保存")
    }else{
    tr.html("<td class='text-left'><input name='id' value='"+id+"' type='hidden'/><input  name='deptName' type='text'  value='"+td_list.eq(0).text()+"'/></td><td><input  name = 'ord' type='text' size='2' value='"+td_list.eq(1).text()+"'></td><td><input type ='button' value='保存' class='btn btn-info btn-sm' onclick='save(this)'>")
    }
}

 function deptadd(btn){
    var tr =$(btn).parent("td").parent("tr");
	var td_list=$(btn).parent("td").siblings("td");
    var id =tr.attr("id")
    
    $("#edit_dept tr:last-child").after("<tr><td class='text-left'><input name='id'type='hidden'/><input  name='deptName' type='text'  /></td><td><input  name = 'ord' type='text' size='2' ></td><td><input type ='button' value='保存' class='btn btn-info' onclick='save(this)'></tr>"); 
    
    
}

 function save(btn){
     
     
     var tr =$(btn).parent("td").parent("tr");
     var td_list=tr.find("input")
     var id =tr.attr("id");
     var dept=$("#edit_dept").serialize();
     $.post("updatedept",
     dept, 
     function(data){
     if(data=="success"){
        tr.html("<td class='text-left'>"+td_list.eq(1).val()+"</td><td>"+td_list.eq(2).val()+"</td><td><input type='button' class='btn btn-primary' value='修改'  onclick='edit(this)'/></td>")    
         
         $("#show_result").text("保存成功") ;
        
         }
         else{
         location.reload();
        }
         
        
       /* $("#td_show").show().val(data);*/
     	/* console.log(data);
        alert(data); */                                //t弹窗提示成功或失败
        })
     
 }

 
 
</script>
</html>
